<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
        >
          <a-form-item
            label="公告名称"
            name="name"
            :rules="[{ required: true, message: '输入公告名称' }]"
          >
            <a-input v-model:value="formData.name" placeholder="输入公告名称" />
          </a-form-item>
          <a-form-item
            label="公告内容"
            name="content"
            :rules="[{ required: true, message: '输入公告内容' }]"
          >
            <a-textarea
              v-model:value="formData.content"
              placeholder="输入公告内容"
              :rows="4"
            />
          </a-form-item>
          <a-form-item
            label="通知群体"
            name="noticeGroup"
            :rules="[{ required: true, message: '选择通知群体' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.noticeGroup"
              placeholder="请选择通知群体"
            >
              <a-select-option :value="1">普通用户</a-select-option>
              <a-select-option :value="2">个体商家</a-select-option>
              <a-select-option :value="3">企业商家</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="通知方式"
            name="noticeMethod"
            :rules="[{ required: true, message: '请选择通知方式' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.noticeMethod"
              placeholder="请选择通知方式"
            >
              <a-select-option :value="1">应用通知</a-select-option>
              <a-select-option :value="2">短信通知</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="通知类型"
            name="noticeType"
            :rules="[{ required: true, message: '请选择通知类型' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.noticeType"
              placeholder="请选择通知类型"
              @change="handleChangeType"
            >
              <a-select-option :value="1">即时通知</a-select-option>
              <a-select-option :value="2">定时通知</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="发送状态"
            name="sendState"
            :rules="[{ required: true, message: '请选择发送状态' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.sendState"
              placeholder="请选择发送状态"
            >
              <a-select-option :value="1">未发送</a-select-option>
              <a-select-option :value="2">已发送</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            v-show="noticeType == 2"
            label="定时时间"
            name="timing"
            ref="timingRef"
            :rules="
              noticeType == 2
                ? [{ required: true, message: '请选择定时时间' }]
                : [{ required: false }]
            "
          >
            <a-date-picker
              :disabled-date="disabledDate"
              format="YYYY-MM-DD HH:mm:ss"
              v-model:value="datePicker"
              show-time
              @change="changeDate"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
            <div class="btns center">
              <a-space>
                <a-button @click="handleCloseDialog">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
              </a-space>
            </div>
          </a-form-item>
        </a-form>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
import dayjs from "dayjs";
import { saveNotice } from "@/api/notice";
const modalOpen = ref(false);
const formData = ref({
  name: undefined,
  content: undefined,
  noticeGroup: undefined,
  noticeMethod: undefined,
  noticeType: undefined,
  sendState: undefined,
  timing: null,
});
const formRef = ref(null);
const title = ref("");
const open = (titles, record) => {
  title.value = titles;
  modalOpen.value = true;
  nextTick(() => {
    formRef.value.resetFields();
    formData.value = Object.assign({}, record);
  });
};
const disabledDate = (current) => {
  return current && current < dayjs().endOf("day");
};
const timingRef = ref(null);
const datePicker = ref(null);
function changeDate(date, dateString) {
  datePicker.value = date;
  // formData.value.datePicker = date
  formData.value.timing = dateString;
  nextTick(() => {
    timingRef.value.resetFields();
  });
}
// 通知类型
const noticeType = ref(1);
function handleChangeType(val) {
  noticeType.value = val;
  nextTick(() => {
    datePicker.value = null
    timingRef.value.resetFields();
  });
}
function handleCloseDialog() {
  modalOpen.value = false;
  formData.value = {};
  formRef.value.resetFields();
}

const emits = defineEmits(["refreshList"]);
function handleSubmit() {
  formRef.value.validate().then(() => {
    delete formData.value.createdTime;
    if (formData.value.noticeType !== 2) {
      delete formData.value.timing;
    }
    saveNotice(formData.value).then((res) => {
      if (res.code === 200) {
        handleCloseDialog();
        emits("refreshList");
      }
    });
  });
}
defineExpose({ modalOpen, open });
</script>
